<template>
  <el-form
      ref="basicInfoForm"
      :model="form"
      label-width="100px"
      label-position="top"
      @validate="onValidate"
  >
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="头像">
<!--          <el-upload-->
<!--              class="avatar-uploader"-->
<!--              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"-->
<!--              :show-file-list="false"-->
<!--              :on-success="handleAvatarSuccess"-->
<!--          >-->
<!--            <img v-if="form.avatar" :src="form.avatar" class="avatar" />-->
<!--            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>-->
<!--          </el-upload>-->
          <el-input v-model="form.avatar" placeholder="请输入头像" />
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
                label="姓名"
                prop="name"
            >
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
                label="性别"
                prop="gender"
            >
              <el-select v-model="form.gender" placeholder="请选择性别">
                <el-option label="男" value="1" />
                <el-option label="女" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item
            label="出生日期"
            prop="birthDate"
        >
          <el-date-picker
              v-model="form.birthDate"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item
            label="联系方式"
            prop="contact"
        >
          <el-input v-model="form.contact" placeholder="请输入手机号码" />
        </el-form-item>

        <el-form-item
            label="邮箱"
            prop="email"
        >
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>

        <el-form-item
            label="学历"
            prop="education"
        >
          <el-select v-model="form.education" placeholder="请选择学历">
            <el-option label="高中" value="高中" />
            <el-option label="大专" value="大专" />
            <el-option label="本科" value="本科" />
            <el-option label="硕士" value="硕士" />
            <el-option label="博士" value="博士" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'

const props = defineProps<{
  form: any
}>()

const emit = defineEmits(['update:form', 'validate'])

const basicInfoForm = ref<FormInstance>()

// 头像上传成功
const handleAvatarSuccess = (response: any) => {
  props.form.avatar = response.url
}

// 表单验证
const onValidate = (prop: string, isValid: boolean) => {
  if (prop === 'name') {
    basicInfoForm.value?.validate((valid) => {
      emit('validate', valid)
    })
  }
}

// 暴露验证方法
defineExpose({
  validate: () => basicInfoForm.value?.validate()
})
</script>

<style scoped>
.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}

.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  line-height: 178px;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>